<template>
    <div class="activity">
        <search-form :searchArray="searchArray" :searchObj="searchObj" @search="getList">
            <el-button class="btn search mL20" @click="addActivity">新增</el-button>
        </search-form>
        <elTable :formData="formData" @getList="getList">
                <el-table-column prop="name" label="活动名称" align="center"></el-table-column>
                <el-table-column prop="type" label="活动类型" align="center">
                </el-table-column>
                <el-table-column prop="beginTime" width="120px" label="开始时间" align="center"></el-table-column>
                <el-table-column prop="mobile" label="结束时间" align="center"></el-table-column>
                <el-table-column prop="contacts" label="活动状态" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="120px;" fixed="right">
                    <template slot-scope="">
                        <!-- <el-button type="text"  @click="editer(scope.row)">编辑</el-button>
                        <el-button type="text"  @click="updateStatus(scope.row)">上下架</el-button>
                        <el-button type="text"  @click="deleteActivity(scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
        </elTable>
        <dialogs
        :visible="visible"
        :title="`${isEditer ? '编辑' : '新增'}活动`"
        width="500px"
        @confirm="save"
        >
            <el-form v-model="activity" label-width="100px">
                <el-form-item prop="name" label="活动名称">
                    <el-input v-model.trim="activity.name" placeholder="请输入活动名称"></el-input>
                </el-form-item>
                <el-form-item prop="store" label="活动类型">
                    <el-select v-model="activity.type" style="width: 100%;">
                        <el-option  v-for="(item, i) in activityTypeList" :label="item.name" :value="item.id" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="name" label="活动开始时间">
                    <el-date-picker
                    v-model="activity.startTime"
                    type="datetime"
                    placeholder="活动开始时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item prop="name" label="活动结束时间">
                    <el-date-picker
                    v-model="activity.endTime"
                    type="datetime"
                    placeholder="活动结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item prop="name" label="活动规则">
                    <el-input v-model.trim="activity.name" placeholder="请输入活动规则"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="活动商品">
                    <el-input v-model.trim="activity.name" placeholder="请选择活动商品"></el-input>
                </el-form-item>
            </el-form>
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
import { mapGetters } from 'vuex'
export default {
    name: 'activityIndex',
    data () {
        return {
            formData: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                data: []
            },
            searchArray: [
                {
                    type: 'input',
                    value: '',
                    label: '活动名称',
                    placeholder: '请输入活动名称',
                    key: 'name'
                },
                {
                    type: 'select',
                    value: '',
                    label: '活动类型',
                    placeholder: '请选择活动类型',
                    key: 'type',
                    list: []
                },
                {
                    type: "datePicker",
                    startText: "开始日期",
                    endText: "结束日期",
                    types: "datetimerange",
                    value: "",
                    rangeSpeparator: "至",
                    label: '活动时间',
                    key1: '',
                    key2: ''
                },
                {
                    type: 'select',
                    value: '',
                    label: '活动状态',
                    placeholder: '请选择活动类型',
                    key: 'status',
                    list: []
                },
            ],
            searchObj: {
                name: '',
                type: '',
                status: ''
            },
            activityTypeList: [],
            activity: {},
            visible: {
                show: false
            },
            isEditer: false
        }
    },
    computed: {
        ...mapGetters({
            enumAll: 'common/getEnumAll'
        }),
    },
    created () {
        // this.init()
    },
    methods: {
        init () {
            this.$set(this.searchArray[1], 'list', this.enumAll['EnumActivityType'])
            // this.getList()
        },
        getList(status = true) {
            if (!status) this.formData.currentPage = 1
            const {searchObj, formData: {currentPage, pageSize}} = this
            this.$loading(true)
            let param = {}
            param = {
                currentPage,
                pageSize
            }
            for (let k in searchObj) {
                if (searchObj[k] !== '') {
                    param[k] = searchObj[k]
                }
            }
            this.$loading(true)
            this.$api.userManage.getCompanyList(param).then(r => {
                this.formData.data = r.data && r.data.list || []
                this.formData.total = r.data && r.data.total || 0
            }).finally(() => {
                this.$loading(false)
            })
        },
        // 编辑
        editer () {

        },
        // 删除
        deleteActivity () {

        },
        updateStatus () {
            
        },
        addActivity () {
            this.visible.show = true
        },
        save () {}
    }
}
</script>
<style lang="scss" scoped>
.activity {
    .search-form {
        margin-bottom: 16px;
    }
}
</style>